<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>Title</title>
    <link rel="stylesheet" href="../css/project.css">

    <script src="../js/libs/jquery-3.0.0.min.js"></script>
    <script src="../js/libs/jquery-weui.min.js"></script>
    <script src="../js/libs/vue2.0.js"></script>
    <script src="../js/libs/parsley.min.js"></script>
    <script src="../js/project.js"></script>
    <style>
        /* 单独某一项验证 */
        /* 验证成功时 */
        input.parsley-success, select.parsley-success, textarea.parsley-success {
            color: #468847;
            background-color: #DFF0D8;
            border: 1px solid #D6E9C6;
        }
        /* 验证失败时 */
        .parsley-error{
            color: #B94A48;
            background-color: #F2DEDE;
            border: 1px solid #EED3D7;
        }

        /* 表单验证 */
        .invalid-form-error-message.filled{color: red;}

        /* 基本样式 */
        label{display: block;font-size: 16px;line-height: 1.6em;}
    </style>
</head>
<body>
<h4>Correctly fill at least one of these blocks</h4>
<form class="demo-form" data-parsley-validate="">
    <div class="first">
        <label for="firstname">Firstname:</label>
        <input type="text" class="form-control" name="firstname" data-parsley-length="[4, 20]" data-parsley-group="block1">

        <label for="lastname">Lastname:</label>
        <input type="text" class="form-control" name="lastname" data-parsley-length="[4, 20]" data-parsley-group="block1">
    </div>
    <hr>
    <div class="second">
        <label for="fullname">Fullname:</label>
        <input type="text" class="form-control" name="fullname" data-parsley-length="[8, 40]" data-parsley-group="block2">
    </div>

    <div class="invalid-form-error-message"></div>
    <input type="submit" class="btn btn-default validate">
</form>

<script type="text/javascript">
    $(function () {
        $('.demo-form').parsley().on('form:validate', function (formInstance) {
            var ok = formInstance.isValid({group: 'block1', force: true}) || formInstance.isValid({group: 'block2', force: true});
            $('.invalid-form-error-message')
                    .html(ok ? '' : '您必须正确填写*这两个块中的至少一个！!')
                    .toggleClass('filled', !ok);
            if (!ok)
                formInstance.validationResult = false;
        });
    });
</script>

</body>
</html>